<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>单点登录 (SSO)</title>
    <style>
        /* Reset & Base Styles */
        * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }

        body {
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          /*background: linear-gradient(135deg, #e3f2fd, #fce4ec);*/
          background: #f0f2f5;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 20px;
        }

        .login-container {
          background: white;
          padding: 40px;
          border-radius: 16px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          width: 100%;
          max-width: 400px;
          animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(-10px); }
          to { opacity: 1; transform: translateY(0); }
        }

        .login-container h2 {
          text-align: center;
          margin-bottom: 30px;
          color: #333;
          font-size: 24px;
          font-weight: 600;
        }

        .form-group {
          margin-bottom: 20px;
        }

        .form-group label {
          display: block;
          margin-bottom: 6px;
          font-weight: 600;
          color: #555;
        }

        .form-group input {
          width: 100%;
          padding: 12px 14px;
          border: 1px solid #ccc;
          border-radius: 8px;
          font-size: 15px;
          transition: border-color 0.3s ease;
        }

        .form-group input:focus {
          border-color: #1a73e8;
          outline: none;
          box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
        }

        .login-button {
          width: 100%;
          padding: 14px;
          background-color: #1a73e8;
          color: white;
          border: none;
          border-radius: 8px;
          font-size: 16px;
          font-weight: bold;
          cursor: pointer;
          transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .login-button:hover {
          background-color: #155ea9;
          transform: translateY(-2px);
        }

        .login-button:active {
          transform: translateY(0);
        }

        .footer {
          margin-top: 24px;
          text-align: center;
          font-size: 13px;
          color: #aaa;
        }

        /* Responsive tweaks */
        @media (max-width: 480px) {
          .login-container {
            padding: 30px 20px;
          }
        }
    </style>
</head>
<body>
<div class="login-container">
    <h2>欢迎回来</h2>
    <form id="loginForm" action="/api/v1/login" method="POST">
        <div class="form-group">
            <input type="hidden" name="redirectUri" th:value="${redirectUri}"/>
            <input type="hidden" name="appId" th:value="${appId}"/>
            <label for="username">用户名或邮箱</label>
            <input type="text" id="username" name="username" required placeholder="请输入用户名或邮箱"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" required placeholder="请输入密码"/>
        </div>
        <button type="submit" class="login-button">立即登录</button>
    </form>

    <div class="footer">
        &copy; 2025 Your Company Name. All rights reserved.
    </div>
</div>
</body>
</html>